<template>
  <div style="background: #f5f5f5; height: 100vh">
    <van-nav-bar
      class="top"
      title="问题反馈"
      left-text=""
      right-text=""
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <div class="questionInfo">
      <div class="stem">
        <p class="text">
          <span class="type">{{ this.question_info.qtype }}</span
          >{{ this.question_info.stem }}
        </p>
        <div
          style="
            line-height: 8.75rem;
            display: inline-block;
            height: 8.75rem;
            margin-bottom: 2.125rem;
          "
          v-if="this.question_info.stem_img"
        >
          <img
            :src="this.question_info.stem_img"
            @click="openImg([this.question_info.stem_img])"
            style="height: 100%"
            alt=""
          />
        </div>
      </div>
      <div class="question">
        <van-radio-group v-if="this.question_info.qtype == '判断'">
          <template>
            <van-radio name="正确" class="pd"> 正确 </van-radio>
            <van-radio name="错误" class="pd"> 错误 </van-radio>
          </template>
        </van-radio-group>

        <van-radio-group
          v-if="
            this.question_info.qtype == '单选' ||
            this.question_info.qtype == '多选'
          "
        >
          <!--  -->
          <div v-for="(item, index) in this.obj.tiList" :key="index">
            <van-radio v-if="item.content" :name="item.cred">
              <span style="padding: 6px 0; display: inline-block"
                >{{ item.content
                }}<img
                  v-if="item.content_img"
                  style="max-width: 100px; max-height: 100px"
                  :src="item.content_img"
                  alt=""
              /></span>
              <template #icon="props">
                <template>
                  <img
                    class="img-icon"
                    :src="require(`@/assets/mobile/exam/${item.cred}.png`)"
                  />
                </template>
              </template>
            </van-radio>
          </div>
        </van-radio-group>
      </div>
    </div>

    <div class="questionBack">
      <div
        style="
          padding-bottom: 0.93rem;
          border-bottom: 1px solid #eeeeee;
          display: flex;
          justify-content: space-between;
        "
      >
        <div
          style="
            font-size: 1rem;
            font-weight: 600;

            color: #333333;
          "
        >
          问题反馈
        </div>
        <span style="font-size: 0.81rem; color: #fa6400">待处理</span>
      </div>
      <van-cell title="问题类型" :value="istype" />
      <div
        class=""
        style="
          margin-top: 1.25rem;
          display: flex;
          justify-content: space-between;
        "
      >
        <p
          style="
            color: #717a89;
            margin-right: 0.75rem;
            font-size: 0.875rem;
            flex-shrink: 0;
          "
        >
          问题描述
        </p>
        这个单选问题，答案是错误的这个单选问题，答案是错误的这个单选问题，答案是错误的。
      </div>
      <van-cell title="反馈时间 " :value="isDate" />
    </div>
  </div>
</template>

<script>
import { ImagePreview } from "vant";
import { delquestion, getquestion, setquestion } from "@/utils/auth";
import { feedbackQuestion } from "@/api/admin.js";
export default {
  data() {
    return {
      obj: {},
      question_info: {},
      isDate: "2023-3-27",
      istype: "单选",
      columns: ["题干缺失", "答案错误", "用户体验", "其他"],
      showType: false,
      errorInfo: "",
    };
  },
  methods: {
    //图片放大
    openImg(img) {
      ImagePreview(img);
    },

    errorBack() {
      // return console.log(this.question_info);
      if (this.errorInfo == "") {
        return this.$toast("反馈内容不得为空");
      }
      feedbackQuestion({
        qtype: this.question_info.qtype,
        category: this.istype,
        question_id: this.$route.params.id,
        question_info: this.$route.params.question_info,
        reason: this.errorInfo,
      }).then((res) => {
        if (res.code == 200) {
          this.$toast("问题已反馈!");

          this.$router.go(-1);
        }
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {},
  },
  created() {
    //保留路由参数 防止刷新丢失
    let info = getquestion();
    if (info) {
      this.obj = JSON.parse(info);
      //    = info.data;
      this.question_info = this.obj.question_info;
    } else {
      let Arr = [];
      this.obj = this.$route.params.all;
      this.question_info = this.$route.params.all.question_info;
      console.log(this.question_info, this.obj, "181818");
      Arr.push(
        {
          cred: "A",
          content: this.questionInfo.a,
          content_img: this.questionInfo.a_img,
        },
        {
          cred: "B",
          content: this.questionInfo.b,
          content_img: this.questionInfo.b_img,
        },
        {
          cred: "C",
          content: this.questionInfo.c,
          content_img: this.questionInfo.c_img,
        },
        {
          cred: "D",
          content: this.questionInfo.d,
          content_img: this.questionInfo.d_img,
        },
        {
          cred: "E",
          content: this.questionInfo.e,
          content_img: this.questionInfo.e_img,
        },
        {
          cred: "F",
          content: this.questionInfo.f,
          content_img: this.questionInfo.f_img,
        }
      );
      this.obj.tiList = Arr;

      setquestion(this.obj);
    }
  },
  mounted() {},
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
::v-deep {
  .van-cell {
    // border: 1px solid #dddddd;
    width: auto;
    padding: 0;
    border-radius: 0.25rem;
    margin-top: 0.93rem;
    .van-cell__value {
      color: #333333;
      font-size: 0.875rem;
    }
    .van-cell__title {
      color: #717a89;
    }
  }

  .questionBack {
    width: auto;
    margin: 0.75rem;
    margin-top: 0.93rem;
    padding: 0.93rem;
    background: #fff;
  }
  .questionInfo {
    background: #fff;
    width: auto;
    height: auto;
    margin: 0.75rem;
    padding: 0.75rem;
    .stem {
      // display: flex;
      // justify-content: flex-start;

      .text {
        .type {
          font-size: 0.75rem;
          display: inline-block;
          text-align: center;
          color: #fff;
          flex-shrink: 0;
          width: 2.43rem;
          height: 1.15rem;
          background: #327bff;
          border-radius: 0.68rem 0.68rem 0 0.68rem;
          margin-right: 0.62rem;
        }
        font-size: 1rem;
      }
    }
    .question {
      .van-radio__icon {
        height: auto;
        .img-icon {
          height: 2.25rem;
          width: 2.25rem;
        }
      }

      .pd {
        margin-top: 1.12rem;
      }
      font-size: 1rem;
    }
  }
  .footer {
    padding-bottom: 1.25rem;
    display: flex;
    justify-content: center;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    .van-button {
      background: #1571f7;
      width: 21.18rem;
    }
  }
  .top {
    background: #327bff;
    .van-nav-bar__content {
      .van-nav-bar__left {
        .van-nav-bar__arrow {
          color: #fff;
          font-size: 1.2rem;
          &:before {
            color: #fff !important;
          }
        }
      }
      .van-nav-bar__title {
        color: #fff;
      }
    }
  }
  .message {
    // padding: 0;
    border: 1px solid #ddd;
    width: auto;
    margin: 0 0.75rem 0.75rem;
    border-radius: 0.25rem;
    .van-field__value {
      // background: #f8f9fd;
    }
  }
}
</style>
